今天將會接續昨天的內容，讓使用者可以選擇要建立新帳號或者是登入帳號，因此這部份較多是在預習過去的條件式語法以及按鍵的使用。那麼就讓我們直接開始今天的內容吧！

今天的內容可以參考官方教學：Conditional Rendering。還記得昨天我們將註冊與登入介面分別做成子元件嗎？現在我們要將這個子元件各自包在 <div> 之中，並於其中加入 v-if的條件式判斷。至於要判斷什麼的布林值，便是我們另外新增的 isSignup 變數，會在每當使用者點擊網頁上的按鈕更改數值，這也代表著點擊此按鈕將會改變畫面。

程式碼如下方所示，因為與上方的教學很相似，因此在此就不一一做說明了。

<!-- 檔案名：App.vue -->
<script setup>
import { ref } from 'vue';
import SignUp from './components/SignUp.vue';
import Login from './components/Login.vue';

const isSignUp = ref(false);
function toggle() {
  isSignUp.value = !isSignUp.value
}
</script>

<template>
  <h1>Terrible Login System</h1>
  <div v-if="isSignUp">
    <SignUp />
    <button @click="toggle">I don't have an account</button>
  </div>
  <div v-else>
    <Login />
    <button @click="toggle">I already have an account</button>
  </div>
</template>

<style scoped></style>